<template>
  <dv-border-box-7 class="wordCloud"  :color="['transparent']" backgroundColor="rgba(4, 40, 96, .25)">
    <div class="wordCloud-box">
      <div class="wordCloud-head">
        <div class="title-sys">
          <img src="../assets/img7.png" alt="" />
          <span>平台线上数据统计</span>
          <img src="../assets/img6.png" alt="" />
          <!-- <img src="../assets/img1.png" alt="" /> -->
        </div>
      </div>
      <div ref="chart" style="width: 100%; height: 200px; margin: auto"></div>
    </div>
  </dv-border-box-7>
</template>

<script>
import { skillTotal } from "../request/api";
export default {
  name: "wordCloud",
  data() {
    return {
      skill_data: [],
    };
  },
  created() {
    this.getData();
  },

  methods: {
    getData() {
      skillTotal().then((res) => {
        for (let k of res.data.data) {
          k.value = k.num;
          k.name = k.skill_name;
        }
        this.skill_data = res.data.data;
        this.getEchartData();
        this.time = setTimeout(() => {
          this.getData();
          clearTimeout(this.time);
        }, 15000);
      });
    },
    getEchartData() {
      const chart = this.$refs.chart;
      if (chart) {
        const myChart = this.$echarts.init(chart);
        const option = {
          background: "#052560",
          tooltip: {
            show: true,
            textStyle: {
              fontSize: 16,
              color: "#fff",
            },
          },
          series: [
            {
              type: "wordCloud",
              gridSize: 10, // 网格大小，各项之间间距
              sizeRange: [12, 30], // 字体大小范围
              width: "100%",
              height: "100%",
              rotationRange: [0, 0], // 文字旋转角度范围
              shape: "circle",
              autoSize: {
                enable: true,
                minSize: 12,
              },
              textStyle: {
                normal: {
                  color: function () {
                    return (
                      "rgba(162, 220, 255, " +
                      Math.floor(Math.random() * 10 + 2) / 10 +
                      ")"
                    );
                  },
                },
              },
              data: this.skill_data,
            },
          ],
        };
        myChart.setOption(option);
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      }
      //  this.$on('hook:destroyed',()=>{
      //    window.removeEventListener("resize", function() {
      //     myChart.resize();
      //   });
      //   })
    },
  
  },
    beforeDestroy() {
      if (this.timer) {
        clearTimeout(this.timer); //关闭
      } //利用vue的生命周期函数
    },
};
</script>

<style scoped lang="less">
.wordCloud {
  margin-top: 2.96vh;
  height: 31.85vh;
  /* background: #042860; */
  position: relative;
  .wordCloud-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    .wordCloud-head {
      height: 7.22vh;
      display: flex;
      align-items: center;
      .title-sys {
        position: relative;
        color: #fff;
        font-size: 1.111vw;
        height: 3.09vh;
        padding-left: 0.486vw;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        span {
          width: 12.083vw;
          text-align: center;
        }
        img {
          width: 16.667vw;
        }
      }
    }
  }
}
</style>